<template>
	<view class="cart">
		<view class="c" :style="{height: contentHeight}">
			<checkbox-group style="height: 100%" @change="checkboxChange">
				<scroll-view style="height: 100%" scroll-y>
					<!-- 购物车列表 -->
					<view class="list" v-for="item in list" :key='item.id'>

						<!-- 左侧 -->
						<view class="l">
							<checkbox style="line-height: 136rpx;" :value="item.id" :checked="item.isChecked" />
							<image :src="item.img" mode="" class="img" @click="goPhotoDetail(item.id)"></image>
						</view>
						<!-- 中间 -->
						<view class="center" @click="goPhotoDetail(item.id)">
							<view class="name">
								{{item.name}}
							</view>
							<view class="type">
								{{item.type}}
							</view>
							<view class="size">
								{{item.size}}
							</view>
							<view class="price">
								<em class="priceStyle">￥{{item.sumPrice}}</em>
							</view>
						</view>
						<!-- 右侧 -->
						<view class="r">
							<!-- 相册可以多份,约拍只卖单份 -->
							<view class="update-count">
								<view class="reduce" @tap.stop="reduce(item.id)">
									-
								</view>
								<view class="cart-count">
									{{item.count}}
								</view>
								<view class="add" @tap.stop="add(item.orderType,item.id)">
									+
								</view>
							</view>
						</view>

					</view>
					<view>
						<div class="recommend">—— <u-icon name="heart" color="red"></u-icon> 为您推荐 ——</div>
						<!-- copy小红书页面 -->
						<copyRedBook :list="recommendList" class="recommendList"></copyRedBook>
					</view>
				</scroll-view>
			</checkbox-group>

		</view>

		<!-- 底部导航栏 -->
		<view style="height: 88px;">
			<view class="tabbar">
				<view class="all">
					<checkbox-group @change="isAllCheckedChange">
						<checkbox id="allCheckBox" value="allChecked" :checked="isAllChecked" /> 全选
					</checkbox-group>
				</view>
				<view class="result">
					<em class="switch-cart">已选：{{commoditiesTotal}}件，</em>
					<em class="totalStr">合计:</em>
					<em class="totalPrice">￥{{cartTotalPrice}}</em>
				</view>
				<view class="submitOrder" @tap="submitOrder">
					结算
				</view>
			</view>
		</view>
		<view style="height: 70px">
			<tabber_my :current="3"></tabber_my>
		</view>
	</view>
</template>

<script>
	import {
		reqShopById
	} from '@/api/shop/index.js'

	export default {
		data() {
			return {
				// 购物车商品数据
				list: [],
				// 是否全选
				isAllChecked: false,
				// 内容高度
				contentHeight: '520px',
				// 商品总数
				commoditiesTotal: 0,
				// 推荐作品集数据
				recommendList: [{
					// 作品id,
					id: '1',
					// 点赞状态
					likeState: false,
					// 点赞数
					likeCount: 590,
					// 价格
					price: 100,
					// 距离
					location: 200,
					// 头像,
					avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
					// 标题
					title: '海边拍照姿势合集，去海边去海边',
					// 商家名
					name: '柯文日常',
					imgUrl: 'https://5b0988e595225.cdn.sohucs.com/images/20181206/4f221ca5d94e4889a60e58144e20d7af.jpeg'

				}, {
					// 作品id,
					id: '2',
					// 点赞状态
					likeState: false,
					// 点赞数
					likeCount: 590,
					// 价格
					price: 100,
					// 距离
					location: 200,
					// 头像,
					avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
					// 标题
					title: '海边拍照姿势合集，去海边去海边',
					// 商家名
					name: '柯文日常',
					imgUrl: 'https://chuangshicdn.mpres.51vv.com/v_block/40bda307a72c55f2c74f9b59b92680f5.jpeg'

				}, {
					// 作品id,
					id: '3',
					// 点赞状态
					likeState: false,
					// 点赞数
					likeCount: 590,
					// 价格
					price: 100,
					// 距离
					location: 200,
					// 头像,
					avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
					// 标题
					title: '海边拍照姿势合集，去海边去海边',
					// 商家名
					name: '柯文日常',
					imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fss2.meipian.me%2Fusers%2F13962430%2F53c5d1ce08c465a896912260ab53431a.jpg%3Fmeipian-raw%2Fbucket%2Fivwen%2Fkey%2FdXNlcnMvMTM5NjI0MzAvNTNjNWQxY2UwOGM0NjVhODk2OTEyMjYwYWI1MzQzMWEuanBn%2Fsign%2Fb67a52a8a84981c072149c34fc76882f.jpg&refer=http%3A%2F%2Fss2.meipian.me&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1696941782&t=6c2ba7e3cf5e00fd0a7acc91bb2caf6a.jpeg'

				}, {
					// 作品id,
					id: '4',
					// 点赞状态
					likeState: false,
					// 点赞数
					likeCount: 590,
					// 价格
					price: 100,
					// 距离
					location: 200,
					// 头像,
					avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
					// 标题
					title: '海边拍照姿势合集，去海边去海边',
					// 商家名
					name: '柯文日常',
					imgUrl: 'https://img2.baidu.com/it/u=3521099769,1289434927&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500.jpeg'

				}, {
					// 作品id,
					id: '5',
					// 点赞状态
					likeState: false,
					// 点赞数
					likeCount: 590,
					// 价格
					price: 100,
					// 距离
					location: 200,
					// 头像,
					avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
					// 标题
					title: '海边拍照姿势合集，去海边去海边',
					// 商家名
					name: '柯文日常',
					imgUrl: 'https://pic.616pic.com/photoone/00/00/60/618ce90314f155672.jpg'
				}, ]
			}
		},
		mounted() {
			let that = this;
			uni.getSystemInfo({
				success: resu => {
					// resu 可以获取当前屏幕的高度
					const query = uni.createSelectorQuery();
					query.select('.c').boundingClientRect();
					query.exec(res => {
						// TODO: 为什么页面可用大小还有一部分留白？
						that.contentHeight = (resu.windowHeight - 70 - 40) + 'px';
					});
				},
				fail: res => {}
			});
			this.fileList = this.getPhotoList;
		},
		computed: {
			// 计算购物车商品总价
			cartTotalPrice() {
				// 计算list列表中所有选中商品的价格
				var sum = 0
				this.list.forEach(el => {
					if (el.isChecked) {
						sum += el.sumPrice
					}
				})
				return sum
			}
		},
		methods: {
			// 全选
			isAllCheckedChange(e) {
				if (e.detail.value.length == 1) {
					// 勾选了全选
					// 每个商品前都勾选上
					this.list.forEach(el => {
						el.isChecked = true
					})
					// 全选勾选上
					this.isAllChecked = true
					// 商品总数量
					this.commoditiesTotal = this.list.length;
				} else {
					// 每个商品前都取消勾选
					this.list.forEach(el => {
						el.isChecked = false
					})
					// 全选取消勾选
					this.isAllChecked = false
					// 商品总数量
					this.commoditiesTotal = 0
				}

			},
			// 复选框改变
			checkboxChange(e) {
				var items = this.list,
					values = e.detail.value;
				if (items.length !== 0 && items.length === values.length) {
					this.isAllChecked = true;
					// 商品总数量
					this.commoditiesTotal = this.list.length;
				} else {
					this.isAllChecked = false;
					// 商品总数量
					this.commoditiesTotal = values.length
				}
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(item.id)) {
						item.isChecked = true
					} else {
						item.isChecked = false
					}
				}
			},
			// 增加商品数量
			add(orderType, id) {
				// 判断是相册还是约拍（1为约拍订单  2为定制订单）
				if (orderType == 1) {
					uni.showToast({
						title: '约拍订单只能单份哦~',
						icon: 'none',
						duration: 3000
					})
				} else {
					this.list.forEach(el => {
						if (el.id == id) {
							if (el.count < el.stock) {
								el.count++

								// 商品小计价格也要改变
								el.sumPrice = el.count * el.price
							} else {
								uni.showToast({
									title: '库存不足哦~',
									icon: 'none'
								})
							}
						}

					})
				}

			},
			// 减少商品数量
			reduce(id) {
				this.list.forEach(el => {
					if (el.id == id) {
						if (el.count > 1) {
							el.count--
							// 商品小计价格也要改变
							el.sumPrice = el.count * el.price
						} else {
							uni.showToast({
								title: '至少购买一件商品哦',
								icon: 'none'
							})
						}
					}

				})

			},

			// 提交购物车订单
			submitOrder() {
				// 判断是否选择购物车商品
				var bol = this.list.every(el => el.isChecked == false)

				// 列表中未选中提示……
				if (bol) {
					return uni.showToast({
						title: '请选择商品',
						icon: 'none'
					})
				} else {
					// 提交选中的订单列表
					var cartList = [];
					this.list.forEach(el => {
						if (el.isChecked) {
							cartList.push(el)
						}
					})

					// 购物车总价
					cartList.totalPrice = this.cartTotalPrice;

					// 购物车列表（购物车总价、购物车具体商品）
					console.log(cartList)
				}

				uni.navigateTo({
					url: '/pages/map/orders'
				});
			},
			// 跳转到照片详情页面
			goPhotoDetail(id) {
				uni.navigateTo({
					url: `/PackageB/photoDetail/photoDetail?id=${id}`
				});
			}
		},
		onShow() {

			var orginList = [{
					id: '0',
					// 订单类型  1为约拍订单  2为定制订单
					orderType: 2,
					name: '摆台定制',
					price: 20,
					count: 1,
					type: '板式：轻奢（横版）',
					size: '尺寸：20寸',
					sumPrice: 20,
					stock: 22,
					img: 'https://5b0988e595225.cdn.sohucs.com/images/20181206/4f221ca5d94e4889a60e58144e20d7af.jpeg'
				},
				{
					id: '1',
					// 订单类型  1为约拍订单  2为定制订单
					orderType: 2,
					name: '相册定制',
					price: 10,
					count: 1,
					type: '主题/页数：毕业风 24页',
					size: '尺寸：方8寸',
					sumPrice: 10,
					stock: 10,
					img: 'https://chuangshicdn.mpres.51vv.com/v_block/40bda307a72c55f2c74f9b59b92680f5.jpeg'
				},
				{
					id: '2',
					// 订单类型  1为约拍订单  2为定制订单
					orderType: 2,
					name: '普通打印',
					price: 20,
					count: 2,
					type: '相纸：乐凯绒面',
					size: '尺寸：1寸',
					sumPrice: 40,
					stock: 11,
					img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fss2.meipian.me%2Fusers%2F13962430%2F53c5d1ce08c465a896912260ab53431a.jpg%3Fmeipian-raw%2Fbucket%2Fivwen%2Fkey%2FdXNlcnMvMTM5NjI0MzAvNTNjNWQxY2UwOGM0NjVhODk2OTEyMjYwYWI1MzQzMWEuanBn%2Fsign%2Fb67a52a8a84981c072149c34fc76882f.jpg&refer=http%3A%2F%2Fss2.meipian.me&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1696941782&t=6c2ba7e3cf5e00fd0a7acc91bb2caf6a.jpeg'
				},
				{
					id: '3',
					// 订单类型  1为约拍订单  2为定制订单
					orderType: 1,
					// 商品名称
					name: '小黄约拍',
					// 价格
					price: 100,
					// 数量
					count: 1,
					// 类型
					type: '写真/古风/古代千金园林风',
					// 尺寸
					size: '',
					// 商品小计（price * count）
					sumPrice: 100,
					// 库存
					stock: 11,
					// 图片
					img: 'https://img2.baidu.com/it/u=3521099769,1289434927&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500.jpeg'
				}
			]
			// list数组中为每一项添加双向绑定的属性---这个属性要在页面显示(onShow)添加
			orginList.forEach(el => el.isChecked = false);
			this.list = orginList;
		},
		onLoad() {

		}
	}
</script>


<style lang="scss" scoped>
	// 购物车标题
	.switch-cart {
		font-size: 26rpx;
		color: #3E3E3E;
	}

	// 购物车背景色
	.cart {
		background: #F7F7F7;
	}

	// 中间部分
	.c {
		width: 728rpx;
		margin: 0 auto;
	}

	// 清除em默认的字体倾斜
	em {
		font-style: normal;
	}

	// 价格样式
	.priceStyle {
		color: #FF4400;
	}

	// 居中显示
	@mixin textCenter {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	// 购物车商品列表
	.list {
		background-color: #FFFFFF;
		height: 208rpx;
		box-shadow: 0 8rpx 16rpx 0 rgba(83, 66, 49, 0.08);
		border-radius: 24rpx;
		margin: 20rpx 0;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.l {
			display: flex;

			.img {
				width: 136rpx;
				height: 136rpx;
				margin-left: 10rpx;
				border-radius: 8%;
			}
		}

		.center {
			width: 280rpx;

			.name {
				font-size: 26rpx;
				color: #3E3E3E;
				letter-spacing: 1.86rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}

			.type {
				font-size: 22rpx;
				color: #8D8D8D;
				letter-spacing: 1.57rpx;

			}

			.size {
				font-size: 22rpx;
				color: #8D8D8D;
				letter-spacing: 1.57rpx;
			}

		}

		// 加减数量
		.update-count {
			border: 2rpx solid;
			display: flex;
			margin-top: -76rpx;
			border-radius: 10rpx;

			.reduce {
				width: 40rpx;
				height: 40rpx;
				line-height: 10.5rpx;
				border-right: 2rpx solid;

				color: #979797;
				@include textCenter;
				font-size: 50rpx;
			}

			.add {
				width: 40rpx;
				height: 40rpx;
				line-height: 10.5rpx;
				border-left: 2rpx solid;
				color: #979797;
				@include textCenter;
				font-size: 40rpx;
			}

			.cart-count {
				width: 20rpx;
				height: 40rpx;
				margin-left: 18rpx;
				margin-right: 18rpx;
				text-align: center;
				line-height: 40rpx;
			}
		}
	}

	// 为您推荐
	.recommend {
		@include textCenter;
		margin: 60rpx 0 0 0;
		font-weight: 700;
	}

	// 底部导航
	.tabbar {
		width: 100%;
		height: 158rpx;
		background-color: #f3f3f3;
		position: fixed;
		bottom: 70px;
		display: flex;
		align-items: center;
		justify-content: space-around;
		border-radius: 8% 8%;

		.all {
			font-size: 32rpx;
			color: #3E3E3E;
			letter-spacing: 2.29rpx;
		}

		// 购物车总价
		.totalPrice {
			font-size: 32rpx;
			color: #3E3E3E;
			letter-spacing: 2.29rpx;
			color: red;
		}

		.submitOrder {
			width: 208rpx;
			height: 80rpx;
			background: #ff5500;
			border-radius: 40rpx;
			font-size: 36rpx;
			color: #FFFFFF;
			letter-spacing: 2.57rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	// 合计
	.totalStr {
		font-weight: 500;
		font-size: 15px;
	}

	.result {
		margin-right: -20rpx;
	}
</style>